<template>

  <div class="product_video" style="height: 300px">
    <h3>Product Usage List Video</h3>
    <p>See how other users use it</p>
  </div>

  
  <div class="product_video_item">
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="(item, index) in videoData" :key="index">
          <video controls width="auto" height="100%">
            <source :src="item.src" type="video/mp4">
          </video>
        </el-carousel-item>
      </el-carousel>
    </div>
</template>


<script>
import { ref, toRefs,reactive,onMounted } from 'vue';
import axios from 'axios'

  export default {
    name: "ProductVideo",

    setup(){
      const data = reactive({
        videoData: [],
      })

      const getVideo = async () =>{
        const response = await axios.get(
          '/api/getVideo/',
          {
            headers: {
              "Content-Type": "application/json;charset=utf-8",
              'X-Requested-With': 'XMLHttpRequest',
              'Access-Control-Allow-Origin': '*'
            }
          }
        )
        data.videoData = response.data.title
      }



      onMounted(() => {
        getVideo()
      })


      return{
        ...toRefs(data),
        getVideo
      }
    },
    components: {
      
    }
  }


</script>



<style scoped>

.product_video {
  padding: 70px  0;
}

.product_video h3 {
  font-size: 30px;
}

.product_video p {
  font-size: 20px;
}

.product_video_item {
  margin-top: -100px;
}



</style>